<template>
    <div class="my-view">
        <div class="my-box">
            <div class="my-bg" :style="{ backgroundImage: `url(${userInfo.userBg})` }">
                <div class="uploader-box">
                    <!-- <van-uploader :after-read="upload" /> -->
                </div>
            </div>
            <div class="bg-cover" v-if="!userInfo.userImg"></div>
        </div>
        <div class="bg-box">
            <div class="my-info">
                <div class="my-img">
                    <img class="auto-img" :src="userInfo.userImg" alt="" />
                </div>
                <div class="user-info">
                    <div class="user-name one-text">{{ userInfo.nickName }}</div>
                    <div class="desc one-text">
                        {{ userInfo.desc ? userInfo.desc : "这家伙很懒，什么也没有留下！" }}
                    </div>
                </div>
            </div>

            <div class="cell-list">
                <div class="cell-list-item" v-for="(item, index) in cellListData" :key="index"
                    @click="gotoPage(item.routeName)">
                    <van-cell :title="item.title" is-link />
                </div>
            </div>
        </div>
    </div>
    <navigationBar :iNum="itemNum" />
</template>


<script lang="ts" setup>

import navigationBar from "../components/navigationBar.vue";
import { getUser } from '@/api/index';
import { useRouter } from "vue-router"

let router: any = useRouter();

let userInfo: any = ref<any>({
    desc: "",
    nickName: "",
    userBg: "",
    userImg: "",
});

let cellListData: any = ref<any>([
    {
        title: "个人资料",
        routeName: "Account",
    },
    {
        title: "我的订单",
        routeName: "Order",
    },
    {
        title: "我的收藏",
        routeName: "Like",
    },
    {
        title: "地址管理",
        routeName: "MyAddress",
    },
    {
        title: "安全中心",
        routeName: "Secure",
    },
]);


let itemNum = ref<string>("3")

//获取用户信息
let getUserInfo: () => void = (): void => {
    getUser().then((result: any): void => {

        if (result.data.code === "A001") {
            userInfo.value = result.data.result[0];
        }
    })
        .catch((err: any): void => {
            console.log(err);

        });
};


function gotoPage(name: string): void {
    router.push({ name });
}

onMounted(() => {
    getUserInfo()
})

</script>

<style lang="less" scoped>
.my-view {
    width: 100vw;
    height: auto;

    .my-box {
        width: 100vw;

        .my-bg {
            width: 100vw;
            height: 140px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            background-color: #e8e8e8;
            position: relative;
        }



        // .bg-cover {}
    }

    .bg-box {
        padding: 10px;
        margin: 0 10px;
        position: relative;
        top: -35px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, .5) 0px, rgba(255, 255, 255, .5) 35px, rgba(255, 255, 255, 1) 35px);
        z-index: 6;

        .my-info {
            display: flex;

            .my-img {
                width: 50px;
                height: 50px;
                background-color: #ddd;
                border-radius: 50%;
                box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, .3);
                overflow: hidden;

                .auto-img {
                    width: 100%;
                }
            }

            .user-info {
                // background-color: antiquewhite;

                margin-left: 10px;

                .user-name.one-text {
                    height: 50%;
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    font-size: 14px;
                    color: #0C34BA;
                }

                .desc.one-text {
                    height: 50%;
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #666;
                }
            }
        }

        .cell-list {
            margin-top: 50px;

            .cell-list-item {
                padding-top: 10px;
            }
        }
    }
}
</style>